<template>
  <a-drawer
    :width="340"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    unmountOnClose
  >
    <template #title> 抄送人设置 </template>

    <div>
      <a-form ref="demandTemplateRef" layout="vertical" :model="copyerConfig">
        <a-form-item
          field="tempName"
          label="选择指定成员"
          validate-trigger="input"
          required
        >
          <div
            style="
              border: 1px solid #c9cdd4;
              width: 100%;
              border-radius: 4px;
              display: flex;
              flex-wrap: wrap;
              min-height: 30px;
              cursor: text;
            "
            @click="tagClick"
          >
            <a-tag
              v-for="tag in copyerConfig.value.participantList"
              :key="tag.objId"
              closable
              style="margin: 5px"
              @close="delHuman(tag.id)"
              >{{ tag.objName }}</a-tag
            >
          </div>
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
  <HumanMadal
    v-model:visible="rorleVisible"
    v-model:data="currenHuman"
    @submit="roleOk"
  />
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted, reactive } from 'vue';
import { useFlowStore } from '@/store/index';
import {
  GetHumanRosterList,
  editFlowPanelPoint,
  getFlowPanelPointById,
  delFlowParticipantByIds
} from '@/apis/flowPanelPoint';
import HumanMadal from '../componnents/HumanMadal/index.vue';
import { cloneDeep } from 'lodash';

let emits = defineEmits(['update:nodeConfig']);
const store = useFlowStore();
const roleValue = ref();
const rorleVisible = ref(false);
const currenHuman = ref<any[]>([]);
const tagClick = () => {
  currenHuman.value = cloneDeep(copyerConfig.value.value.participantList) || [];
  rorleVisible.value = true;
};
const roleOk = () => {
  let arr: any = [];
  currenHuman.value.forEach((item) => {
    let obj = {
      objId: item.id,
      objName: item.name,
      objType: 1
    };
    arr.push(obj);
  });
  copyerConfig.value.value.participantList = arr;
  rorleVisible.value = false;
};
const roleCancel = () => {
  rorleVisible.value = false;
};

const copyerConfig = ref<{ value?: any }>({ value: { nodeUserList: [] } });
watch(
  () => store.copyerConfig1,
  (newVal, oldVal) => {
    copyerConfig.value = store.copyerConfig1;
  },
  { deep: true }
);
const closeDrawer = () => {
  store.setCopyer(false);
};
let visible = computed({
  get() {
    return store.copyerDrawer;
  },
  set() {
    closeDrawer();
  }
});
watch(
  () => visible.value,
  () => {
    //
  }
);
const handleOk = async () => {
  store.setCopyerConfig({
    value: copyerConfig.value,
    flag: true,
    id: copyerConfig.value?.id
  });
  const { id, processId, pointName, participantList } =
    copyerConfig.value.value;
  let obj = { id, processId, pointName, participantList };
  await delFlowParticipantByIds({ ids: delIds.value });

  await editFlowPanelPoint({ ...obj });
  emits('update:nodeConfig', copyerConfig.value);
  store.setCopyer(false);
};
const handleCancel = () => {
  store.setCopyer(false);
};
const roleChoise = (role: any) => {
  let obj: any = {};
  obj.type = 1;
  obj.userStaffId = role.id;
  obj.userStaffName = role.name;
  if (typeof copyerConfig.value.value.nodeUserList !== 'object') {
    copyerConfig.value.value.nodeUserList = [];
  }
  copyerConfig.value.value.nodeUserList?.push(obj);
};
// 获取角色下拉列表
const roleList = ref<{ id: number; name: string }[]>([]);
const getRoleList = async () => {
  // let res = await gainRole();
  // roleList.value = res;
};
// 获取人员列表
const personList = ref<{ id: number; name: string }[]>([]);
const getPerson = async () => {
  // let res = await GetOrganizationchart();
  // personList.value = res.staff;
  personList.value = [{ id: 1, name: '张三' }];
};
onMounted(() => {
  getRoleList();
  getPerson();
});
const humanList = ref<any[]>([]);
const getHumanList = async () => {
  const res = await GetHumanRosterList({
    pageNumber: 0,
    pageSize: 20,
    typeName: 5
  });
  humanList.value = res?.content || [];
};
const getPonit = async () => {
  const id = copyerConfig.value.value.id;
  const ss = await getFlowPanelPointById(id);
  console.log('ssss', ss);
};
watch(
  () => visible.value,
  (val) => {
    if (!val) return;

    getPonit();

    getHumanList();
  }
);
const delIds = ref<number[]>([]);
const delHuman = (id?: number) => {
  const index = copyerConfig.value.value.participantList?.findIndex(
    (item) => item.id === id
  );
  copyerConfig.value.value.participantList.splice(index, 1);
  if (!id) return;
  if (delIds.value.includes(id)) return;
  delIds.value.push(id);
};
</script>

<style lang="less" scoped>
.item {
  padding-bottom: 16px;
  margin: 8px 0;
  border-bottom: 1px solid #eee;
}
</style>
